<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.configuration.data')">
      <table style="width: 98%" class="tab-table">
        <tr>
          <th scope="col" width="48%" align="left">
            <label>{{ $t("business.workload.key") }}</label>
          </th>
          <th scope="col" width="48%" align="left">
            <label>{{ $t("business.workload.value") }}</label>
          </th>
          <th align="left" />
        </tr>
        <tr v-for="label in data" v-bind:key="label.index">
          <td>
            <ko-data-item
              v-model="label.key"
              placeholder="e.g. foo"
              clearable
              itemType="input"
              @change="syncToModel"
            />
          </td>
          <td>
            <ko-data-item
              v-model="label.value"
              placeholder="e.g. bar"
              clearable
              itemType="textarea"
              @change="syncToModel"
            />
          </td>
          <td>
            <el-button
              type="text"
              style="font-size: 10px"
              @click="onDeleteData(label)"
            >
              {{ $t("commons.button.delete") }}
            </el-button>
          </td>
        </tr>
      </table>
      <div class="h-21 flex items-start mt-3 gap-2">
        <el-button @click="onAddDataRow">
          {{ $t("commons.button.add") }}
        </el-button>
        <el-upload :before-upload="readFile" action="">
          <el-button>{{ $t("commons.button.upload") }}</el-button>
        </el-upload>
      </div>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import { decodeFromBase64, encodeToBase64 } from "@/utils/text";
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import { onMounted, ref } from "vue";

type Prop = {
  dataObj?: any;
};
const props = defineProps<Prop>();
const emit = defineEmits(["update:dataObj"]);
const data = ref([]);

const parseData = (dataObj: any) => {
  if (!dataObj) return;
  for (const key in Object.keys(dataObj)) {
    data.value.push({
      index: Math.random(),
      key: key,
      value: decodeFromBase64(dataObj[key])
    });
  }
};

const onAddDataRow = () => {
  data.value.push({
    index: Math.random(),
    key: "",
    value: ""
  });
};

const onDeleteData = row => {
  data.value = data.value.filter(item => item.key !== row.key);
};

const readFile = file => {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    const item = {
      index: Math.random(),
      key: file.name,
      value: reader.result
    };
    data.value.push(item);
    syncToModel();
  };
  return false;
};

const syncToModel = () => {
  const encodeData = {};
  for (const item of data.value) {
    encodeData[item.key] = encodeToBase64(item.value);
  }

  emit("update:dataObj", encodeData);
  console.log(encodeData);
};

onMounted(() => {
  parseData(props.dataObj ?? {});
});
</script>

<style scoped></style>
